<template>
    <div>
        <el-table :data="orderData" border style="width: 100%">
            <el-table-column prop="_id" label="编号" width="240">
            </el-table-column>
            <el-table-column prop="orderTime" label="受保时间" width="120">
            </el-table-column>
            <el-table-column prop="orderUserName" label="受保人" width="100">
            </el-table-column>
            <el-table-column prop="orderType" label="产品类别" width="100">
            </el-table-column>
            <el-table-column prop="orderPrice" label="订单价格" width="100">
            </el-table-column>
            <el-table-column
                prop="orderSales.salesName"
                label="销售人员"
                width="100"
            >
            </el-table-column>
            <el-table-column prop="teacher" label="退保申请处理" width="120">
                <template slot-scope="aaas">
                    <el-tag
                        ><el-button
                            :loading="!aaas.row.oderState"
                            type="text"
                            size="small"
                            @click="aaa(aaas)"
                            >{{ text }}</el-button
                        ></el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column prop="teacher" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button
                        type="success"
                        size="small"
                        round
                        @click="showOrder(scope.row)"
                        >查看</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <!-- 修改 -->
                    <el-button
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        @click="updateOrder(scope.row)"
                    ></el-button>
                    <!-- 删除 -->
                    <el-button
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="deleteOrders(scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <router-view />
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
    created() {
        this.getallorders();
    },
    data() {
        return {
            orderData: [],
            test: true,
            text: "申请退保",
        };
    },
    methods: {
        aaa(data) {
            // 发起请求
            data.row.orderState = false;
            this.text = "处理中";
            // 请求完成
            let _this = this;
            setTimeout(() => {
                data.row.orderState = true;
                this.text = "正在申请中..";
            }, 3000);
        },
        //获取订单列表
        async getallorders() {
            const id = JSON.parse(localStorage.getItem("user"));

            const { data } = await axios({
                url: "/orders/getOrders",
                method: "get",
                params: {
                    _id: id._id,
                },
            });
            console.log(data.data, 1111222);
            if (data.status) {
                this.orderData = data.data.filter(
                    (elem) => elem.orderSales._id == id._id
                );
            }
        },
        //删除订单
        async deleteOrders(row) {
            const data = await axios({
                url: "/orders/deleteOrders",
                method: "post",
                data: {
                    _id: row._id,
                },
            });
            if (data.status) {
                alert("删除成功");
                this.getallorders();
                this.$router.push("AllOrders");
            }
        },
        updateOrder(row) {
            let obj = {
                path: "salesUpdateOrder",
                query: {
                    id: row._id,
                },
            };
            this.$router.push(obj);
        },
        showOrder(row) {
            let obj = {
                path: "salesShowOrder",
                query: {
                    id: row._id,
                },
            };
            this.$router.push(obj);
        },
    },
};
</script>

<style lang='scss'>
#box {
    width: 75%;
    margin-left: 25px;
}
.el-table .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 15px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
}
</style>